<template lang="pug">
  .largeScreen
    weather-report
    .studentWrapper
      el-divider
        el-select(v-model="classesId" size="large" round)
          el-option(
            v-for="item in classes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          )
      el-row(:gutter="20" style="margin-top: 30px")
        el-col(:span="6")
          .panel
            h2
              span 本月寿星
            .studentList
              el-row(:gutter="20" v-if="absenceStudents.length > 0")
                el-col(:span="12" v-for="item in monthBirthStudents" :key="item.id")
                  .studentBox
                    a-image(:url="item.url" width="98px" height="98px" defaultType="student")
                    h3 {{item.name}}
              empty(v-else)
        el-col(:span="12")
          .panel
            h2
              span 在校学生
            .studentList
              el-row(:gutter="20" v-if="absenceStudents.length > 0")
                el-col(:span="12" v-for="item in students" :key="item.id")
                  .studentBox
                    a-image(:url="item.url" width="98px" height="98px" defaultType="student")
                    h3 {{item.name}}
              empty(v-else)
        el-col(:span="6")
          .panel
            h2
              span 缺勤学生
            .studentList
              el-row(:gutter="20" v-if="absenceStudents.length > 0")
                el-col(:span="12" v-for="item in absenceStudents" :key="item.id")
                  .studentBox
                    a-image(:url="item.url" width="98px" height="98px" defaultType="student")
                    h3 {{item.name}}
              empty(v-else)
</template>
<script>
import dayjs from 'dayjs'
import Empty from '@/components/Basic/Empty'
import AImage from '@/components/Basic/Image'
import WeatherReport from '@/components/Business/WeatherReport'
import { toChinesNum } from '@/utils/util'

export default {
  components: {
    AImage,
    Empty,
    WeatherReport
  },
  data () {
    return {
      time: '',
      date: dayjs().format('YYYY年MM月DD日'),
      day: dayjs().get('d') === 0 ? '日' : toChinesNum(dayjs().get('d')),
      classesId: '',
      classes: [],
      monthBirthStudents: [], // 本月寿星列表
      absenceStudents: [], // 缺勤学生列表
      students: [] // 在校学生列表
    }
  },
  computed: {
    timeMix () {
      return dayjs().get('hour') > 11 ? 'PM' : 'AM'
    }
  },
  created () {
    const timer = setInterval(() => {
      this.getTime()
    }, 1000)
    this.$on('hook:beforeDestroy', function () {
      clearInterval(timer)
    })
  },
  methods: {
    getTime () {
      this.time = dayjs().format('HH:mm:ss')
    }
  }
}
</script>
<style lang="scss" scoped>
.studentWrapper{
  margin: 60px 0;

  ::v-deep {
    .el-divider {
      background-color: #E8E8E8;

      .el-divider__text{
        padding: 0
      }

      .el-input--large{
        .el-input__inner{
          height: 60px;
          border-radius: 30px;
          padding: 0 35px;
        }

        .el-input__suffix{
          right: 30px
        }
      }
    }
  }

  .panel {
    background: #FAFAFA;
    border-radius: 30px;
    position: relative;

    h2 {
      span {
        display: inline-block;
        width: 128px;
        height: 40px;
        background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
        border-radius: 30px 0px 30px 0px;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 40px;
        text-align: center;
      }
    }
    .studentList {
      padding: 30px 40px
    }
  }
}
</style>
